<template>
  <div class="imageComponent" v-if="oItem">
    <div class="item">
      <div class="left">必填</div>
      <div class="right">
        <el-switch
          v-model="oItem.required"
          active-color="#0079fe"
          inactive-color="#dddddd"
          @change="requiredChange">
        </el-switch>
      </div>
    </div>
    <div class="item">
      <div class="left">标题</div>
      <div class="right">
        <el-input placeholder="请输入标题内容" v-model="oItem.title" :maxlength="50" @input="titleInputChange" clearable>
        </el-input>
      </div>
    </div>
    <div class="item">
      <div class="left">说明文字</div>
      <div class="right">
        <el-input placeholder="请输入说明文字" v-model="oItem.desc" :maxlength="100" @input="descInputChange" clearable>
        </el-input>
      </div>
    </div>
    <div class="item">
      <div class="left">最大上传数量</div>
      <div class="right">
        <el-input :placeholder="'默认最多可上传'+oItem.max+'张'" :maxlength="3" v-model.number="oItem.max" @input="maxInputChange" clearable>
          <template slot="append">张</template>
        </el-input>
      </div>
    </div>

  </div>
</template>
<script>
  import Bus from "@/utils/bus";
  export default {
    name: "imageComponent",
    data() {
      return {
        pageName: "图片组件",
        oItem: null
      }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
      if (this.item) {
        this.oItem = this.item;
      }
    },
    methods: {
      //切换是否必填的状态
      requiredChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.required = this.oItem.required;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          required: this.oItem.required
        })
      },
      //监听输入标题的事件
      titleInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.title = this.oItem.title;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          title: this.oItem.title
        })
      },
      //监听输入文字描述的事件
      descInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.desc = this.oItem.desc;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          desc: this.oItem.desc
        })
      },
      //监听输入最大上传数量的事件
      maxInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        if(this.oItem.max) {
          if(isNaN(this.oItem.max) || String(this.oItem.max).indexOf(".")>-1) {
            this.oItem.max = 1;
          } else {
            this.oItem.max = parseInt(this.oItem.max);
          }
          setFormContent.forEach(row => {
            if(row.id === this.oItem.id) {
              row.max = this.oItem.max;
            }
          })
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit(`${this.item.ename}${this.item.id}`, {
            max: this.oItem.max
          })
        }else{
          setFormContent.forEach(row => {
            if(row.id === this.oItem.id) {
              row.max = 1;
            }
          })
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit(`${this.item.ename}${this.item.id}`, {
            max: this.oItem.max
          })
        }
      }
    },
    computed: {},
    watch: {},
  }
</script>
<style scoped lang="scss">
  .imageComponent {
    .item{
      display: flex; align-items: center; margin-bottom:20px;
      .left{width:30%;display: flex; justify-content: flex-end;padding-right: 10px;box-sizing: border-box;font-size: 14px;color:#888;}
    }
  }
</style>
